<template>
  <div class="process_info">
    <div v-if="userTeamInfo && userTeamInfo.id" class="model_content gl_clear gl_px_10 gl_py_10">
      <div class="delegation_img_wrap gl_fl">
        <img class="delegation_img" :src="getStaticFileUrl(userTeamInfo.imagePath)" @error="errorPhoto">
      </div>
      <div class="delegation_info">
        <div class="delegation_name delegation_info_item">
          <span class="delegation_name_style">{{ userTeamInfo.name }}</span>
          <!-- <span>俱乐部</span> -->
        </div>
        <div class="delegation_info_short delegation_info_item">简称：{{ userTeamInfo.shortName }}</div>
        <div class="delegation_info_item">联系人：{{ userTeamInfo.contactPerson }}</div>
        <div class="delegation_info_item">联系电话：{{ userTeamInfo.phoneNumber }}</div>
      </div>
    </div>
    <div class="model_content">
      <van-button class="edit_btn_style" :icon="img_desc" color="#fff" block @click="clickEdit()">编辑团体信息</van-button>
    </div>
    <div class="bottom_btn">
      <van-button class="bottom_btn_style" type="primary" color="#31456c" block @click="clickNextStep">填写资料</van-button>
    </div>
    <!-- 团体编辑弹框 -->
    <van-popup v-model="dialogVisibleForTeam" get-container="#app" position="right" :style="{ width: '100%', height: '100%' }">
      <div class="add_member">
        <van-nav-bar class="main_header" title="编辑">
          <template #left>
            <span @click="dialogVisibleForTeam = false">返回</span>
          </template>
          <template #right>
            <span @click="submitTeamInfo">确定</span>
          </template>
        </van-nav-bar>
        <div class="add_member_content">
          <delegation-info
            ref="refDelegationInfo"
            :team-data="createDelegationInput"
            :is-default-check="createDelegationInput.isApproved"
            :organization-units-types="dict.delegationType"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

import { CopyData } from '@/lib';

import img_desc from '@/assets/images/league/mb_edit.png';
import defaultPhoto from '@/assets/images/face_default.png';
import delegationInfo from '@/viewMobile/components/DelegationInfo';

import {
  api_POST_EventsManagementDelegation, // 新建机构
  api_PUT_EventsManagementDelegationId
} from '@/extend/api/gameswaggerApi/app';

import {
  SiSTKWEventsManagementCreateDelegationInput
} from '@/lib/form/game/swaggerForm';

export default {
  components: {
    delegationInfo
  },
  props: {
    requiredIdData: {
      type: Object,
      default () {
        return {};
      }
    },
    isShow: {
      type: Boolean
    },
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    // 当前用户团体信息
    userTeamInfo: {
      type: Object,
      default () {
        return {};
      }
    },
    // 字典信息
    dict: {
      type: Object,
      default () {
        return {};
      }
    },
    // 字典信息
    district: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  data () {
    return {
      img_desc: img_desc,
      defaultPhoto: defaultPhoto, // 默认照片
      createDelegationInput: new SiSTKWEventsManagementCreateDelegationInput(),
      dialogVisibleForTeam: false, // 控制团体信息弹窗显示
      confirmInfo: [], // 数据信息集合
      teamInfoLoading: false
    };
  },
  computed: {
    ...mapState({
      cache: state => state.dict.cache
    }),
    idCardTypeMap() {
      const _map = {};
      this.dict.idCardType.forEach(item => {
        _map[item.code] = item;
      });
      return _map;
    }
  },
  watch: {
    dialogVisibleForTeam(val) {
      if (!val) {
        this.createDelegationInput = new SiSTKWEventsManagementCreateDelegationInput();
      }
    },
    isShow: {
      immediate: true,
      deep: true,
      handler: function(val) {
        if (val) {
          this.getDictByType(['district']);
          this.confirmInfo = this.userTeamInfo ? [this.userTeamInfo] : [{}];
        }
      }
    },
    userTeamInfo(val) {
      if (val) {
        this.confirmInfo = [this.userTeamInfo];
      }
    }
  },
  methods: {
    // 若没有字典信息，外部可直接调用方法获取字典数据
    ...mapActions({ getDictByType: 'dict/getDictByType' }),
    // 编辑按钮
    clickEdit() {
      this.dialogVisibleForTeam = true;
      if (this.userTeamInfo) {
        CopyData(this.userTeamInfo, this.createDelegationInput);
      }
    },
    // 提交团体信息
    submitTeamInfo() {
      this.$refs.refDelegationInfo.getcreateDelegationInputVO()
        .then(
          res => {
            if (res.imagePath) {
              const _delegationId = this.requiredIdData.delegationId;
              if (_delegationId) {
                this.updateDelegationInfo(res);
              } else {
                this.createDelegationInfo(res);
              }
            } else {
              this.$toast({ type: 'fail', message: `请上传团体标志` });
            }
          }
        )
        .catch(
          error => {
            console.log('updateDelegationInfo -> error', error);
          }
        );
    },
    // 更新团体信息
    updateDelegationInfo (data) {
      api_PUT_EventsManagementDelegationId(this.requiredIdData.delegationId, data)
        .then(
          res => {
            this.dialogVisibleForTeam = false;
            this.$toast({ type: 'success', message: `操作成功` });
            this.$emit('onGetUserTeamInfo');
          }
        )
        .catch(
          error => {
            this.$toast({ type: 'fail', message: `修改团体信息失败 ${error.error.message}` });
          }
        );
    },
    // 创建一个团体
    createDelegationInfo (data) {
      api_POST_EventsManagementDelegation(data)
        .then(
          res => {
            this.dialogVisibleForTeam = false;
            this.$toast({ type: 'success', message: `操作成功` });
            this.$emit('onGetUserTeamInfo');
            this.$emit('reGetUserType');
          }
        )
        .catch(
          error => {
            this.$toast({ type: 'fail', message: `创建团体信息失败${'，' + error.error.message || ''}` });
            console.log('updateDelegationInfo -> error', error);
          }
        );
    },
    // 点击执行下一步操作
    clickNextStep () {
      const _isComplete = this.checkInfoComplete();
      if (_isComplete) {
        this.$emit('onNextStep');
      } else {
        this.$toast({ type: 'fail', message: `请确认并补全您的基本信息` });
      }
    },
    // 校验信息是否完整
    checkInfoComplete() {
      let _infoComplete = false;
      _infoComplete =
        Boolean(this.userTeamInfo) &&
        Boolean(this.userTeamInfo.name) &&
        Boolean(this.userTeamInfo.provinceCode) &&
        Boolean(this.userTeamInfo.delegationTypeCode) &&
        Boolean(this.userTeamInfo.phoneNumber);
      return _infoComplete;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
      img.onerror = null;
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style>
  .edit_btn_style .van-button__text {
    font-size: 13px;
    font-weight: 400;
    color: #666;
    line-height: 19px;
    margin-left: 6px;
  }
</style>
<style lang="scss" scoped>
  .process_info {
    padding-top: 10px;
  }
  .model_content {
    box-sizing: border-box;
    width: calc(100% - 20px);
    margin: 0 auto 10px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.10);
  }
  .delegation_img {
    width: 66px;
    height: 66px;
    border-radius: 4px;
  }
  .delegation_img_wrap {
    padding-top: 6px;
  }
  .delegation_info {
    margin-left: 80px;
  }
  .delegation_name_style {
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    color: #333333;
    margin-right: 7px;
  }
  .delegation_info_short {
    padding-bottom: 6px;
    border-bottom: 1px dashed #979797;
  }
  .delegation_info_item {
    margin-bottom: 4px;
    padding-left: 2px;
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
  }
  .bottom_btn {
    position: fixed;
    height: 80px;
    padding: 20px;
    width: 100%;
    left: 0;
    bottom: 0;
  }
  .bottom_btn_style {
    height: 40px;
    border-radius: 4px;
  }
</style>
